<template>
	<view class="page">
		<!-- #ifdef H5 -->
			<topVue title="查看积分记录" rightIcon="server-fill" :isBack="true"></topVue>
		<!-- #endif -->

		<view class="main-content">
			<scroll-view class="content relative" scroll-y>
				<view class="tabVue flex">
					<view class="tab" :class="{active: current===0}" @click="getRecords(0)">AI视频积分</view>
					<view class="tab" :class="{active: current===1}" @click="getRecords(1)">AI微信积分</view>
				</view>
				<view class="w100 flex-column align-center padding-column20; absolute-auto" v-if="isEmpty">
					<image src="../../static/empty.png" style="width: 256rpx; height: 256rpx;"></image>
					<text style="color: #81868e;">{{current===1?'暂无AI微信积分记录':'暂无AI视频积分记录'}}</text>
				</view>
				<view class="item flex align-center" v-for="(item, index) in recordList" :key="index">
					<view class="dot" :class="{active: item.action!=='ADD'}">{{item.action!=='ADD'?'-':'+'}}</view>
					<view class="flex-1 flex-column padding-row20 flex-between" style="height: 70rpx;">
						<text style="font-weight: 600; color: #000; font-size: 32rpx; line-height: 1;">{{item.points}}</text>
						 <text style="color: #6B7688;  line-height: 1;">{{item.action!=='ADD'?`使用${item.points}${current===1?'微信':"视频"}积分`:`增加${item.points}${current===0?'微信':"视频"}积分`}}</text>
					</view>
					<text style="color: #9CB7D8">{{item.createTime}}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				current: 0,
				isEmpty: false,
				recordList:[]
			}
		},
		async onLoad() {
			await this.getRecords(0)
		},
		methods: {
			// 获取积分记录
			async getRecords(e){
				this.current = e
				const res = await this.$request("/aiet-user-center/user/points/records", {
						type: this.current===0?'AI_VIDEO':'AI_WECHAT'
					}, "GET")
					if(res.code === 200) {
						this.recordList = res.data
						this.isEmpty = res.data.length===0
					}
					console.log("获取积分记录", this.recordList)
				}
			},
	}
</script>

<style lang="less" scoped>
	.main-content {
		width: 100%;
		height: calc(100vh - var(--window-bottom) - var(--window-top) - 92rpx);
		padding: 30rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #10B981, #3B82F6);
		.content {
			width: 100%;
			height: 100%;
			background: #fff;
			border-radius: 12rpx;
			box-sizing: border-box;
			.tabVue {
				width: 100%;
				height: 92rpx;
				border-radius: 12rpx 12rpx 0 0;
				overflow: hidden;
				.tab {
					width: 50%;
					height: 92rpx;
					line-height: 92rpx;
					text-align: center;
					color: #fff;
					background: #49A19F;
				}
				.active {
					background: #2468E0;
				}
			}
			.item {
				width: 100%;
				height: 120rpx;
				border-bottom: 1rpx solid #E5E7EB;
				.dot {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: #22C55E;
					line-height: 70rpx;
					text-align: center;
					color: #fff;
				}
				.active {
					background: #EF4444;
				}
			}
			.item:nth-last-child(1) {
				border: none;
			}
		}
	}


	.item {
		width: 100%;
		height: 140rpx;
		padding: 20rpx 30rpx;
		.dot {
			width: 100rpx;
			height: 100rpx;
			border-radius: 8rpx;
			background: #EDEDF2;
			line-height: 100rpx;
			text-align: center;
			font-size: 50rpx;
		}
		.num {
			color: #191D38;
			font-weight: 600;
		}
		.label {
			color: #979BB4;
		}
	}
</style>
